import React, { useState, useEffect } from 'react';
import './addActivity.less';
import { nanoid } from 'nanoid';

import { Progress } from 'antd';

import { history } from 'umi';

const moment = require('moment');

import { activityDetailApi } from '../../../../../api/createActivity';
import BasicInfo from '../basicInfo/basicInfo'; //  引入 基本信息
import CreateAcitity from '../createAcitity/createAcitity'; //  引入 创建活动
export default function (props) {
  // const [activityName, setActivityName] = useState(''); // 活动名称
  // const [activityArea, setActivityArea] = useState(''); // 活动地区
  // const [activityTime, setActivityTime] = useState(''); // 活动时间
  // const [activityPlace, setActivityPlace] = useState(''); // 活动地点
  // const [activityOrganizer, setActivityOrganizer] = useState(''); // 活动主办方
  // const [activityContent, setActivityContent] = useState(''); // 活动内容
  // const [activityImg_1, setActivityImg_1] = useState(''); // 活动图
  // const [activityImg_2, setActivityImg_2] = useState(''); // 缩略图

  const [pageHide, setPageHide] = useState(false); //  显示 和 隐藏 页面  父组件 第一第二页 页面的切换
  const [progressNum, setProgressNum] = useState(50); //  进度条 属性

  const [basicData, setBasicData] = useState({}); //  点击下一步拿到的 数据

  const [activityEditData, setActivityEditData] = useState({}); // 获取到 编辑时 活动详情的数据
  const [getActivityEditId, setGetActivityEditId] = useState(''); //  保存 编辑时 的 activityBasicId

  const activityFn = (...args) => {
    return activityDetailApi(...args);
  };

  useEffect(async () => {
    if (history?.location?.query?.activityBasicId) {
      //  获取 活动详情的 数据
      let activityBasicId = history.location.query.activityBasicId;
      setGetActivityEditId(activityBasicId);
      let res = await activityFn({ activityBasicId });
      if (res.data.code == 200) {
        // console.log("活动详情的 res: ", res.data.data)
        let aa = JSON.parse(JSON.stringify(res.data.data));
        setActivityEditData(aa);
      }
    }
  }, []);

  const getBasicInfo = (data) => {
    //  拿到 下一步 表单中的 所有 数据
    //  传过来的  两张 图片 应该拿最后一张图片
    // console.log("父组件 拿到 数据", data)
    if (Object.keys.length > 0) {
      setBasicData(data);
    }
  };

  const btnNextStep = () => {
    //  下一步
    setPageHide(true);
    setProgressNum(100);
  };
  const btnBackStep = () => {
    //  上一步
    setPageHide(false);
    setProgressNum(50);
  };

  return (
    <div className="add_activity_content">
      {/* 创建 活动 卡片 */}
      <div className="add_activity_progress_all">
        <div className="progress_title"> 创建活动 </div>
        <div style={{ width: '60%' }}>
          <div className="progress_top">
            <div className="progress_circle circle_color_active"></div>
            <div className="progress_rate">
              <Progress
                percent={progressNum}
                showInfo={false}
                strokeColor="#172278"
                strokeWidth={4}
              />
            </div>
            <div
              className={
                pageHide
                  ? 'progress_circle  circle_color_active'
                  : 'progress_circle'
              }
            ></div>
          </div>

          <div className="progress_text">
            <div
              className="active_text"
              onClick={() => {
                setPageHide(false);
                setProgressNum(50);
              }}
            >
              基本信息
            </div>
            <div
              className={pageHide ? 'active_text text_pointer' : 'text_pointer'}
              onClick={() => {
                setPageHide(true);
                setProgressNum(100);
              }}
            >
              活动信息
            </div>
          </div>
        </div>
      </div>

      {/* 填写活动的基本信息  第一页 */}
      <div className={pageHide ? 'page_hide' : null}>
        <BasicInfo
          getBasicInfo={getBasicInfo}
          btnNextStep={btnNextStep}
          activityEditData={activityEditData}
        />
      </div>

      {/* 填写活动基本信息   第二页 */}
      <div className={pageHide ? null : 'page_hide'}>
        <CreateAcitity
          basicData={basicData} // 传过去的 数据
          btnBackStep={btnBackStep} //  点击 上一步返回上一页
          activityEditData={activityEditData} // 编辑 时 的 数据
          getActivityEditId={getActivityEditId} // 传过去的 id
        />
      </div>
    </div>
  );
}
